<template>
    <div class="login">
        <div class="loginTop">
            <span>
                <img src="@/assets/homeImg/logo.0940ebb5.png" alt="">
                <span class="come">欢迎登陆</span>
            </span>
            <span>
                <span>进入网站首页</span>
                <i class="iconfont icon-angle-right"></i>
                <i class="iconfont icon-angle-right"></i>
            </span>
        </div>

        <div class="center">
            <div class="centerBox">
                <nav>
                    <a @click="activeName = 'account'" :class="{active:activeName==='account'}"
                        href="javascript:;">账户登录</a>
                    <a @click="activeName = 'qrcode'" :class="{ active: activeName === 'qrcode' }"
                        href="javascript:;">扫码登录</a>
                </nav>
                <div v-if="activeName === 'qrcode'" class="qrcode-box">
                    <img src="@/assets/qrcode.jpg" alt="">
                    <p>打开 <a href="javascript:;">小兔鲜App</a> 扫码登录</p>
                </div>
                <LoginFormVue v-if="activeName === 'account'"></LoginFormVue>
            </div>
        </div>


       <button @click="a">点击</button>
    </div>
</template>

<script>
import LoginFormVue from './login/LoginForm.vue';

export default {
    components: { LoginFormVue },
    data(){
        return{
            activeName:'account'
        }
    },
    methods:{
        a(){
            this.$message({
                type:'success',
                text:'你好'
            })
        }
    }
}
</script>



<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.active{
    color: $xtxColor;
}
.login {
    width: 100%;
    height: 100%;

    .loginTop {
        width: 1240px;
        height: 132px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            height: 80px;
        }

        .come {
            font-size: 24px;
            color: gray;
        }
    }

    .center {
        width: 100%;
        height: 488px;
        background-image: url('@/assets/login-bg.696efec3.png');
        padding-right: 160px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .centerBox {
            width: 380px;
            height: 400px;
            background: white;
            nav{
                width: 100%;
                display: flex;
                justify-content: space-around;
                height: 54px;
                line-height: 54px;
                font-size: 18px;
                a{
                    text-decoration: none;
                }
            }

            .qrcode-box {
                text-align: center;
                padding-top: 40px;

                p {
                    margin-top: 20px;

                    a {
                        color: black;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>